<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>订单列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!-- 引入layui.css -->
    <link
            rel="stylesheet"
            href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css"
    >
    <!-- 引入layui.js -->
    <script scr="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>

    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body>
    <div class="x-nav">
      <span class="layui-breadcrumb">
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>


    <div class="x-body">
      <!--表单信息（搜索条件）-->
      <div class="layui-form">
        <!--这两个隐藏的输入框用来存放当前页码值，以及页面显示数据的最大行数-->
        <input type="hidden" name="pageNum" id="pageNum" value="1">
        <input type="hidden" name="pageSize" id="pageSize" value="10">
        <div class="layui-form-item">
          <div class="layui-inline">
<!--            <label class="layui-form-label">日期</label>-->
<!--            <div class="layui-input-block">-->
              <input type="text" class="layui-input" name="dateRange" id="dateSelect" placeholder="订单日期">
<!--              <i class="layui-icon">&#xe637;</i>-->

              <!--            </div>-->
          </div>
            <div class="layui-inline">
                <!--            <label class="layui-form-label">订单号</label>-->
<!--                <div class="layui-input-block">-->
                    <input type="text" name="ordernumber" placeholder="订单编号" autocomplete="off" class="layui-input">
<!--                </div>-->
            </div>
            <div class="layui-inline">
<!--                <div class="layui-input-block">-->
                    <input type="text" name="colonelname" placeholder="团长姓名" autocomplete="off" class="layui-input">
<!--                </div>-->
            </div>
          <div class="layui-inline">
<!--            <label class="layui-form-label">用户名</label>-->
<!--            <div class="layui-input-block">-->
              <input type="text" name="username" placeholder="用户名" autocomplete="off" class="layui-input" >
<!--            </div>-->
          </div>
          <div class="layui-inline">
<!--            <label class="layui-form-label">手机号</label>-->
<!--            <div class="layui-input-block">-->
              <input type="text" name="telep" placeholder="手机号码" autocomplete="off" class="layui-input">
<!--            </div>-->
          </div>
            <div class="layui-inline">
<!--                <div class="layui-input-block">-->
                    <select name="orderstate" id="orderstate">
                        <option value="">订单状态</option>
                        <option value="0">待付款</option>
                        <option value="1">待收货</option>
                        <option value="2">待评价</option>
                        <option value="3">已完成</option>
                        <option value="4">已申请退款</option>
                        <option value="5">已取消</option>
                    </select>
<!--                </div>-->
            </div>
          <div class="layui-inline">
            <button id="getUser" class="layui-btn" lay-submit lay-filter="LAY-user-front-search">
              <i class="layui-icon layui-icon-search"></i>
            </button>
          </div>
        </div>
      </div>
<!--      <xblock>-->
<!--        <button class="layui-btn layui-btn-danger" onclick="delMany()" id="delMany1"><i class="layui-icon"></i>批量删除</button>-->
<!--        <span class="x-right" style="line-height:40px" id="userNum">共有数据：88 条</span>-->
<!--      </xblock>-->
      <script type="text/html" id="table-operation">
<!--        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">-->
<!--          <i class="layui-icon layui-icon-edit"></i>编辑</a>-->
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
          <i class="layui-icon layui-icon-delete"></i>删除</a>
      </script>
<div style="text-align: center">
      <!--数据表格位置-->
      <table id="data-table" lay-filter="data-table"></table>
      <!--分页位置-->
      <div id="data-page" class="layui-table-page" lay-filter="data-page"></div>
</div>
    </div>
    <script type="text/html" id="statusTemplet">
      {{# if(d.orderstate == 0) { }}
      <button class="layui-btn layui-btn-danger layui-btn-xs">待付款</button>
      {{# } else if (d.orderstate == 1) { }}
      <button class="layui-btn layui-btn-normal layui-btn-xs">待收货</button>
      {{# } else if (d.orderstate == 2) { }}
      <button class="layui-btn layui-btn-warm layui-btn-xs">待评价</button>
      {{# } else if (d.orderstate == 3) { }}
      <button class="layui-btn layui-btn-primary layui-btn-xs">已完成</button>
      {{# } else if (d.orderstate == 4) { }}
      <button class="layui-btn layui-btn-disabled layui-btn-xs">已申请退款</button>
      {{# } else { }}
      <button class="layui-btn layui-btn-disabled layui-btn-xs">已取消</button>
      {{# } }}
    </script>

    <script>
        var cids=new Array()
        var cidsList=new Array()

        /*删除数组中指定下标的元素*/
        function remove(arr, item) {
            for(var i=arr.length-1;i>=0;i--)
            {
                if(arr[i]==item)
                {
                    arr.splice(i,1);
                }
            }
            return arr;
        }
        // 此时不用考虑位置影响

      layui.use(['form','table','laypage','layer','laydate'], function() {
        var $ = layui.jquery
                ,form = layui.form,table = layui.table,laypage=layui.laypage,layer=layui.layer,laydate=layui.laydate;

        laydate.render({
          elem: '#dateSelect',//指定html中的id
          range:'~' //自定义分割字符
        })


        var limits = [10, 20, 30, 40]
        var pageNum=$("#pageNum")
        var pageSize=$("#pageSize")
        let userTable=table.render({
          elem: "#data-table",
          url: "/order/getAllOrders/",//获取所有订单
          id:"idTest",
          // width:1200,
          defaultToolbar:['filter',  'exports','print'],
          cols: [[
              // { type: 'checkbox' },
            {field: "oid", width: 30, title: "ID", sort: true,hide:true},
              {field: "ordernumber", title: "订单号", align: "center", width: 200},
            {field: "username", title: "用户名",align: "center",  width: 100},
            {field: "goodstitle", title: "商品名",align: "center"},
            {field: "colonelname", title: "团长名", align: "center", width: 100},
            {field: "num", title: "数量", align: "center", sort:true,width: 80},
            {field: "dealprice", title: "金额（元）",align: "center",  width: 100,sort:true},
            {field: "dealtime", title: "下单时间",align: "center"},
            {field: "telep", title: "手机号",align: "center", width:120},
            {field: "address", title: "地址",align: "center"},
            {field: 'orderstate', title: '订单状态', align: 'center', templet: '#statusTemplet',width: 120},
            {title: "操作", align: "center", toolbar: "#table-operation",width: 120}
            ]],
          done:function (res, curr, count) {
            //显示总数据量
            // $('#userNum').html('共有数据：'+res.count +' 条')
            //显示服务器响应的数据，方便观看
            console.log(res)
              let data=res.data
              //  把该页所有数据的用户id保存到uidsList用于后面的全选删除操作
             console.log(data)
              for (let i=0;i<data.length;i++){
                  cidsList.push(data[i].cid)
              }
              console.log("cidsList:"+cidsList)
            laypage.render({
              elem: 'data-page',//被渲染的分页栏id，此处不需要加#号
              count: count,//数据总条数
              curr:  res.pageNum,//当前页码
              limit: res.pageSize,//当前页展示的最大行数
              limits: limits,//分页大小选项
              //分页栏的样式，具体情况可以去layui镜像网站查看
              layout:['count','prev','page','next','limit','skip'],
              jump:function (obj,first) {
                //将当前分页栏的属性打印在控制台，方便观察
                console.log("当前分页栏的属性")
                console.log(obj)
                //当操作分页栏后，获得当前页码的数据，赋值给隐藏的用来存放页码的输入框
                $("#pageNum").val(obj.curr)
                // pageNum=obj.curr
                //同理它是赋值给pageSize的
                $("#pageSize").val(obj.limit)
                // pageSize=obj.limit
                //如果是首次加载页面，那就不执行
                // alert("1")
                if (!first){
                    // pageNum = $('#pageNum').val();
                    // orderstate = $('#orderstate').val();
                    // if (pageNum!=1 && orderstate==0){
                    //     $('#orderstate').val("");
                  $("#getUser").click()
/*                  if (selectDate==null){
                    $("#getUser").click()
                    cidsList=[]
                    cids=[]
                  }else {
                    table.reload('idTest', {
                      where: {
                        'selectDate':selectDate,
                        'pageNum':obj.curr,
                        'pageSize':obj.limit
                      }
                    });
                  }*/
                }
              }
            });
          },
        });

        form.on('submit(LAY-user-front-search)', function (data) {
          var filed = data.field;
          table.reload('idTest', {
              where: filed
          });
          return false;
        });

        /*用户-删除全部*/
        function delAll(argument) {

          var data = tableCheck.getData();

          layer.confirm('确认要删除吗？' + data, function (index) {
            //捉到所有被选中的，发异步进行删除
            layer.msg('删除成功', {icon: 1});
            $(".layui-form-checked").not('.header').parents('tr').remove();
          });
        }

        /*刪除一条数据*/
          table.on('tool(data-table)', function(obj){ //注：tool 是工具条事件名，data-table 是 table 原始容器的属性 lay-filter="对应的值"
              var data = obj.data; //获得当前行数据
              var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
              var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
              console.log(data)
              var uid=data.uid;
              if(layEvent === 'detail'){ //查看
                  //do somehing
              } else if(layEvent === 'del'){ //删除
                  layer.confirm('真的删除行么', function(index){
                      obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                      layer.close(index);
                      //向服务端发送删除指令
                      $.ajax({
                          type: 'GET',
                          url: "/users/"+uid+"/delUserByUid",
                          processData: false,
                          contentType: false,
                          async: false,
                          success: function (res) {
                              console.log(res);
                          }
                      });
                  });
              } else if(layEvent === 'edit'){ //编辑
                  //do something
                  //同步更新缓存对应的值
                  obj.update({
                      username: '123'
                      ,title: 'xxx'
                  });
              }
          });


          // var uids=new Array()
          table.on('checkbox(data-table)', function(obj){
              var data=obj.data;
              console.log("复选框")
              console.log(obj); //当前行的一些常用操作集合
              console.log(obj.checked); //当前是否选中状态

              //若是选择状态，则加入uids数组
              if (obj.checked==true){
                  uids.push(data.uid)
              }else{//若为未选择状态，则删除该uid
                  uids=remove(uids,data.uid)
              }
              console.log(obj.data); //选中行的相关数据
              console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
              if (obj.type=="all"){
                  console.log(data);
                  uids=uidsList
              }
              console.log(uids)
          });



      })//layui结束


      function delMany(argument) {
          console.log("============="+uids)
          layer.confirm('确认要删除吗？' + uids, function (index) {
              //捉到所有被选中的，发异步进行删除
              layer.msg('删除成功', {icon: 1});
              $.ajax({
                  type: 'GET',
                  url: "/users/"+uids+"/delManyUsers",
                  processData: false,
                  contentType: false,
                  async: false,
                  success: function (res) {
                      console.log(res);
                  }
              });
              // $(".layui-form-checked").not('.header').parents('tr').remove();
          });
      }

    </script>
<script type="text/html" id="imgtmp">
  <img src="{{d.avatar}}" style="width:40px;height: 40px;">
</script>
  </body>

</html>